import React from 'react';
import { useSize } from 'ahooks';
// import _ from 'lodash';

export default function UseSizeHoc(
  WarpComComponent,
  styles = {},
  onHandle = () => {
    return {};
  },
) {
  return function HOCComponent(props) {
    const sizeRef = React.useRef();
    const size = useSize(sizeRef);
    return (
      <div ref={sizeRef} style={styles}>
        <WarpComComponent
          {..._.omit(props, ['forwardRef'])}
          size={size}
          // ref={props.forwardRef}
          {...onHandle(size)}
        />
      </div>
    );
  };
}
